<template>
  <div class="bread-crumb">
    <div class="bread-crumb-left">
      <el-breadcrumb :separator-icon="IconMdiChevronRight">
        <el-breadcrumb-item v-if="back" @click="goback">
          <el-icon>
            <icon-mdi-chevron-left-circle-outline/>
          </el-icon>
        </el-breadcrumb-item>
        <el-breadcrumb-item
          v-for="link in list"
          :key="link.path"
          :clickable="false"
        >
          {{ link.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import IconMdiChevronRight from 'virtual:icons/mdi/chevron-right'

  defineProps<{
    back?: boolean;
  }>();

  const route = useRoute();

  const router = useRouter();

  const list = computed(() => {
    return route.matched.filter(({ meta }) => meta.title);
  });

  const goback = () => {
    router.go(-1);
  };
</script>

<style lang="less" scoped>
  .bread-crumb {
    padding: 15px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    &-left {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
</style>
